<html><head><meta charset="utf-8"/><title>删除DOM</title></head><body><h1>删除DOM</h1><div class="x-wiki-content x-main-content">
 <p>
  删除一个DOM节点就比插入要容易得多。
 </p>
 <p>
  要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的
  <code>
   removeChild
  </code>
  把自己删掉：
 </p>
 <pre><code>// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
</code></pre>
 <p>
  注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
 </p>
 <p>
  当你遍历一个父节点的子节点并进行删除操作时，要注意，
  <code>
   children
  </code>
  属性是一个只读属性，并且它在子节点变化时会实时更新。
 </p>
 <p>
  例如，对于如下HTML结构：
 </p>
 <pre><code>&lt;div id="parent"&gt;
    &lt;p&gt;First&lt;/p&gt;
    &lt;p&gt;Second&lt;/p&gt;
&lt;/div&gt;
</code></pre>
 <p>
  当我们用如下代码删除子节点时：
 </p>
 <pre><code>var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // &lt;-- 浏览器报错
</code></pre>
 <p>
  浏览器报错：
  <code>
   parent.children[1]
  </code>
  不是一个有效的节点。原因就在于，当
  <code>
   &lt;p&gt;First&lt;/p&gt;
  </code>
  节点被删除后，
  <code>
   parent.children
  </code>
  的节点数量已经从2变为了1，索引
  <code>
   [1]
  </code>
  已经不存在了。
 </p>
 <p>
  因此，删除多个节点时，要注意
  <code>
   children
  </code>
  属性时刻都在变化。
 </p>
 <h3>
  练习
 </h3>
 <ul id="test-list">
  <li>
   JavaScript
  </li>
  <li>
   Swift
  </li>
  <li>
   HTML
  </li>
  <li>
   ANSI C
  </li>
  <li>
   CSS
  </li>
  <li>
   DirectX
  </li>
 </ul>
 <pre><code>&lt;!-- HTML结构 --&gt;
&lt;ul id="test-list"&gt;
    &lt;li&gt;JavaScript&lt;/li&gt;
    &lt;li&gt;Swift&lt;/li&gt;
    &lt;li&gt;HTML&lt;/li&gt;
    &lt;li&gt;ANSI C&lt;/li&gt;
    &lt;li&gt;CSS&lt;/li&gt;
    &lt;li&gt;DirectX&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
 <p>
  把与Web开发技术不相关的节点删掉：
 </p>
 <pre><code class="language-x-javascript">'use strict';
----
// TODO
----
// 测试:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t &amp;&amp; t.children &amp;&amp; t.children.length === 3) {
        arr = [];
        for (i = 0; i &lt; t.children.length; i ++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
            console.log('测试通过!');
        }
        else {
            console.log('测试失败: ' + arr.toString());
        }
    }
    else {
        console.log('测试失败!');
    }
})();
</code></pre>
</div>
</body></html>